<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-04-03 11:18:58
-->
<route lang="json5" type="home">
{
  needLogin: true,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '设备详情',
    disableScroll: false,
  },
}
</route>
<template>
  <view class="detail">
    <gc-formHeard title="设备详情" />
    <view class="detailBox formBox">
      <uv-form labelPosition="left" ref="form" :labelStyle="labelStyle">
        <uv-form-item label="设备名称" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="通讯类型" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备编码" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="协议版本" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
          <template v-slot:right>
            <uv-icon name="reload"></uv-icon>
          </template>
        </uv-form-item>
        <uv-form-item label="软件版本" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
          <template v-slot:right>
            <uv-icon name="reload"></uv-icon>
          </template>
        </uv-form-item>
      </uv-form>
      <view class="title">基础属性</view>
      <uv-form labelPosition="left" ref="form" :labelStyle="labelStyle">
        <uv-form-item label="设备名称" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="通讯类型" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备编码" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备名称" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="通讯类型" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备编码" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备名称" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="通讯类型" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
        <uv-form-item label="设备编码" prop="userInfo" borderBottom>
          <uv-input v-model="model1.userInfo" readonly border="none" />
        </uv-form-item>
      </uv-form>
    </view>
    <view class="bottomBox" :style="{ paddingBottom: safeAreaInsets.bottom + 20 + 'px' }">
      <uv-button
        type="primary"
        color="linear-gradient(-33deg, #226CFF, #329AFB);"
        shape="circle"
        text="修改设备"
        @click="toDetail"
      ></uv-button>
    </view>
  </view>
</template>

<script setup lang="ts" name="energyStorage">
const { safeAreaInsets, windowHeight } = uni.getSystemInfoSync()
onPageScroll(({ scrollTop }) => {})
const model1 = ref({
  userInfo: '123123',
})
const labelStyle = ref({ color: '#6E7D99', fontSize: '30rpx', width: '240rpx' })
const toDetail = () => {
  uni.navigateTo({ url: '/pages/device/edit' })
}
onMounted(() => {})
</script>

<style scoped lang="scss">
.detail {
  .detailBox {
    position: relative;
    z-index: 2;
    min-height: 100px;
    padding: 0 30rpx 160rpx;
    margin-top: -15px;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
  }

  .title {
    display: flex;
    align-items: center;
    margin: 40rpx 0 20rpx;
    font-size: 30rpx;
    color: #3b4e73;

    &::before {
      box-sizing: border-box;
      display: block;
      width: 20rpx;
      height: 20rpx;
      margin-right: 20rpx;
      content: '';
      border: 4rpx solid #2473fe;
      border-radius: 50%;
    }
  }

  .bottomBox {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 40rpx;
    background: #fff;
  }
}
</style>
